<script lang='ts'>
import { defineComponent, h, onBeforeMount, reactive, ref, watch } from 'vue'
export default defineComponent({
    name: 'JxtechUploadSingle'
})
</script>

<script lang="ts" setup>
import { ElNotification } from 'element-plus'
import { ZoomIn, Download, Delete } from '@element-plus/icons-vue'
import { getAccessToken } from '/@/utils/common'
import { saveUploadFileUrl } from "/@/api/org/file-attachment"

const emit = defineEmits<{
    (e: 'upload-success', _response: any, _file: any, _fileList: any): void//上传成功触发事件
    (e: 'upload-error', _response: any, _file: any, _fileList: any): void//上传失败触发事件
    (e: 'upload-preview', _file: any): void//点击预览
    (e: 'upload-remove', _file: any, _fileList: any): void//上传失败触发事件
    (e: 'update:visible', val: Boolean): void//行点击事件
}>()
const jxtechUploadSingleRef = ref()
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    // 必填
    itemType: {
        type: [String, Number],
        require: true
    },
    // 必填
    busiId: {
        type: [String, Number],
        require: true
    },
    // 必填
    compId: {
        type: [String, Number],
        require: true
    },
    // 必填
    projectid: {
        type: [String, Number],
        require: true
    },
    // 有父级时候必传
    parentid: {
        type: [String, Number],
        default: () => { }
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 支持发送cookie凭证信息
    withCredentials: {
        type: Boolean,
        default: false
    },
    // 支持上传文件类型 （thumbnail-mode 模式下此参数无效）
    accept: {
        type: String,
        default: 'txt,png,ppt,pptx,doc,docx,war,zip,bmp,gif,jpg,jpeg,xls,xlsx,pdf,mov,mp4,json,tif,dwg'
    },
})
watch(() => props.visible, (val) => {
    uploadSingleState.visible = val
})

const uploadSingleState = reactive({
    visible: props.visible,
    fileList: [],
    //上传附带的参数
    data: {
        itemType: props.itemType,
        busiId: props.busiId,
        compId: props.compId,
        projectid: props.projectid,
        typeid: props.parentid
    },
    onPreview: (_file: any) => {
        // 点击预览
        emit("upload-preview", _file)
    },
    onRemove: (_file: any, _fileList: any) => {
        ElNotification({
            title: '文件移除',
            message: _file.name,
            type: 'success',
            duration: 0
        })
        emit("upload-remove", _file, _fileList)
    },
    onSuccess: (_response: any, _file: any, _fileList: any) => {
        ElNotification({
            title: '上传成功',
            message: _file.name,
            type: 'success',
        })
        emit("upload-success", _response, _file, _fileList)
    },
    onError: (_response: any, _file: any, _fileList: any) => {
        console.log("上传on error", _file)
        ElNotification({
            title: '上传失败',
            message: _file.name,
            type: 'error',
            duration: 0
        })
        emit("upload-error", _response, _file, _fileList)
    },
    headers: {
        Authorization: ''
    },
    disabled: props.disabled,
    onExceed: () => {
        ElNotification({
            title: '添加失败',
            message: "待上传文件数量超过限制",
            type: 'error',
            duration: 0
        })
    },
    // ---方法---
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 (file, fileList)
    onChange: (file: any, fileList: any) => {
        // console.log(fileList.length)
    },
    // 清除已经上传的文件列表 （该方法不支持在 before-upload 中调用）
    clearFiles: () => {
        jxtechUploadSingleRef.value.clearFiles()
    },
    // 取消上传请求
    abort: () => {
        jxtechUploadSingleRef.value.abort()
    },
    //手动上传文件列表
    submit: () => {
        jxtechUploadSingleRef.value.submit()
    },
    // 取消按钮
    // uploadBtnCancel: () => {
    // 	uploadDialogVisible.value = false
    // },
    // 确定按钮
    uploadBtnOk: () => {
        jxtechUploadSingleRef.value.submit()
    }
})
// 预览按钮
const handlePictureCardPreview = (file: any) => {
    // dialogImageUrl = file.url
    // dialogVisible = true
    console.log(file)

}
// 下载按钮
const handleDownload = (file: any) => {

}
//删除按钮
const handleRemove = (file: any) => {

}

watch(() => uploadSingleState.visible, (val) => {
    emit('update:visible', val)
})
defineExpose({ getuploadState: () => uploadSingleState })
onBeforeMount(() => {
    if (!props.itemType || !props.busiId || !props.compId || !props.projectid) {
        uploadSingleState.visible = false
        ElNotification({
            title: '注意：上传组件缺少必要参数',
            message: h('span', { style: 'color: red' }, 'itemType || busiId || compId || projectid'),
            duration: 0,
        })
    }

    //写入token
    let token = getAccessToken()
    uploadSingleState.headers['Authorization'] = "bearer " + token
})
</script>
<template>
    <el-dialog v-model="uploadSingleState.visible" title="单文件上传">
        <div class="jxtech-upload-single-container">
            <el-upload
                :action="saveUploadFileUrl"
                method="POST"
                ref="jxtechUploadSingleRef"
                class="upload-single-box"
                name="files"
                list-type="picture"
                :show-file-list="true"
                :auto-upload="false"
                :multiple="false"
                :drag="false"
                :limit="1"
                :accept="props.accept"
                :headers="uploadSingleState.headers"
                :data="uploadSingleState.data"
                :with-credentials="props.withCredentials"
                :file-list="uploadSingleState.fileList"
                :disabled="uploadSingleState.disabled"
                :on-preview="uploadSingleState.onPreview"
                :on-remove="uploadSingleState.onRemove"
                :on-success="uploadSingleState.onSuccess"
                :on-error="uploadSingleState.onError"
                :on-change="uploadSingleState.onChange"
                :on-exceed="uploadSingleState.onExceed"
            >
                <div class="upload-single-box">
                    <jxtech-svg-icon :size="44" icon="icon-shangchuantupian"></jxtech-svg-icon>
                </div>
            </el-upload>
        </div>

        <template #footer>
            <jxtech-upload-button class="btn-upload" @click="uploadSingleState.submit()"></jxtech-upload-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.jxtech-upload-single-container {
    width: 100%;
    height: 100%;
    position: relative;
    .btn-upload {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
.upload-single-box {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 148px;
    align-items: center;
}
.upload-button {
    margin-top: 30px;
    margin-right: 10px;
}
.upload-list__item-title {
    font-size: 14px;
    font-weight: 700;
}
</style>